import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_shop/pages/base/base_state.dart';
import 'package:flutter_shop/pages/common/login/login_contract.dart';
import 'package:flutter_shop/pages/common/login/login_presenter.dart';
import 'package:flutter_shop/r.dart';
import 'package:flutter_shop/res/colors.dart';
import 'package:flutter_shop/res/dimens.dart';
import 'package:flutter_shop/res/styles.dart';
import 'package:flutter_shop/utils/utils.dart';
import 'package:flutter_shop/widget/common_app_bar.dart';
import 'package:flutter_shop/widget/water_click.dart';

/// Title:登录 <br/>
/// Description: <br/>
/// author:xiemiao <br/>
/// date: 2020-03-11  <br/>
/// version 1.0 <br/>
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends BaseState<LoginPage, LoginPresenter> implements LoginView {
  TextEditingController _userNameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  ///显示用户名清除按钮
  bool _showUserNameClear = false;

  ///显示密码清除按钮
  bool _showPasswordClear = false;

  ///眼睛开关
  bool _eyesOpen = false;

  @override
  LoginPresenter createPresenter() => LoginPresenter();

  @override
  void initState() {
    super.initState();
    _userNameController.addListener(() {
      setState(() {
        _showUserNameClear = Utils.strIsNotEmpty(_userNameController.text);
      });
    });
    _passwordController.addListener(() {
      setState(() {
        _showPasswordClear = Utils.strIsNotEmpty(_passwordController.text);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: CommonAppBar("登录"),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Gaps.v_gap_30,
                  Image.asset(R.assetsImgLogo),
                  Gaps.v_gap_30,
                  _userNameEdit(),
                  _passwordEdit(),
                  Gaps.v_gap_30,
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 30),
                    child: MaterialButton(
                      minWidth: double.infinity,
                      height: 45,
                      color: CommonColors.primary,
                      onPressed: () {
                        mPresenter.login(_userNameController.text, _passwordController.text);
                      },
                      child: Text(
                        '登录',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
                bottom: 30,
                child: Column(
                  children: <Widget>[
                    Text(
                      "其他登录方式",
                      style: TextStyles.second_text,
                    ),
                    Gaps.v_gap_10,
                    WaterClick(
                      onPressed: () {
                        mPresenter.wxLogin();
                      },
                      child: Image.asset(
                        R.assetsImgCommonIconWx,
                        width: 50,
                        height: 50,
                      ),
                    )
                  ],
                ))
          ],
        ),
      ),
    );
  }

  ///用户名
  Widget _userNameEdit() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 30),
      decoration: BoxDecoration(
        border: Borders.bottom,
      ),
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _userNameController,
              keyboardType: TextInputType.emailAddress,
              inputFormatters: [
                WhitelistingTextInputFormatter(RegExp("[0-9a-zA-Z]")),
                LengthLimitingTextInputFormatter(18),
              ],
              style: TextStyle(fontSize: CommonDimens.font_size_xmiddle, color: CommonColors.common_text),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "用户名",
                hintStyle: TextStyle(fontSize: CommonDimens.font_size_middle, color: CommonColors.gray),
              ),
            ),
          ),
          Offstage(
            offstage: !_showUserNameClear,
            child: WaterClick(
              onPressed: () {
                _userNameController.clear();
              },
              child: Image.asset(
                R.assetsImgCommonIconClear,
                width: 20,
                height: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }

  ///密码
  Widget _passwordEdit() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 30),
      decoration: BoxDecoration(
        border: Borders.bottom,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _passwordController,
              keyboardType: TextInputType.emailAddress,
              obscureText: !_eyesOpen,
              inputFormatters: [
                WhitelistingTextInputFormatter(RegExp("[0-9a-zA-Z]")),
                LengthLimitingTextInputFormatter(18),
              ],
              style: TextStyle(fontSize: CommonDimens.font_size_xmiddle, color: CommonColors.common_text),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "密码",
                hintStyle: TextStyle(fontSize: CommonDimens.font_size_middle, color: CommonColors.gray),
              ),
            ),
          ),
          Offstage(
            offstage: !_showPasswordClear,
            child: WaterClick(
              onPressed: () {
                _passwordController.clear();
              },
              child: Image.asset(
                R.assetsImgCommonIconClear,
                width: 20,
                height: 20,
              ),
            ),
          ),
          Gaps.h_gap_10,
          WaterClick(
            onPressed: () {
              setState(() {
                _eyesOpen = !_eyesOpen;
              });
            },
            child: Image.asset(
              _eyesOpen ? R.assetsImgCommonIconEyesOpen : R.assetsImgCommonJiconEyesClose,
              width: 20,
              height: 20,
            ),
          )
        ],
      ),
    );
  }
}
